<template>
  <div>
    <!-- 不传递 header，隐藏头部 -->
    <NewsWall
      :newsList="[
        {
          icon: 'https://example.com/icon1.png',
          news: '科技巨头发布新款手机',
          url: 'https://example.com/news1'
        },
        {
          icon: 'https://example.com/icon2.png',
          news: '世界杯预选赛赛程公布',
          url: 'https://example.com/news2'
        },
        { icon: 'https://example.com/icon3.png', news: '股市今日开盘大涨', url: '/finance-news' },
        {
          icon: 'https://example.com/icon4.png',
          news: '知名歌手推出新专辑',
          url: '/entertainment-news'
        }
      ]"
    />

    <!-- 使用自定义题头 -->
    <NewsWall
      header="最新资讯"
      :newsList="[
        {
          icon: 'https://example.com/icon1.png',
          news: '科技巨头发布新款手机',
          url: 'https://example.com/news1'
        },
        {
          icon: 'https://example.com/icon2.png',
          news: '世界杯预选赛赛程公布',
          url: 'https://example.com/news2'
        },
        { icon: 'https://example.com/icon3.png', news: '股市今日开盘大涨', url: '/finance-news' },
        {
          icon: 'https://example.com/icon4.png',
          news: '知名歌手推出新专辑',
          url: '/entertainment-news'
        }
      ]"
      ExpandMode="Link"
      @link-click="handleLinkClick"
    />
  </div>
</template>

<script>
import NewsWall from '@/components/wall/NewsWall.vue'

export default {
  components: { NewsWall },
  methods: {
    handleLinkClick() {
      console.log('跳转到新闻详情页')
      this.$router.push('/all-news') // 这里可以设置实际的路由跳转
    }
  }
}
</script>
